<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/static/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="/static/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="/static/js3/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="progress">
    <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-success active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
        <span class="sr-only">0 Complete</span>
    </div>
</div>
<button id="btn" class="btn-success"  >开始</button>
</body>

<script>
    $(function () {
        $('#btn').click(function () {
            var value=0;
            var time1=setInterval(function () {
                value+=1;
                $('#progress-bar').html(value+'%');
                $('#progress-bar').css("width",value+'%');
                if(value==100){
                    clearInterval(time1);
                }
            },30);
        })
    })
</script>
</html>